﻿

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>自定义过渡的类名</title>
		<script src="vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

    </head>
    <body class="docs">
    进入/离开 & 列表过渡 — Vue.js<br />
    https://cn.vuejs.org/v2/guide/transitions.html<br />
    <div id="demo">
	  <button @click="show = !show">
		Toggle render
	  </button>
	  <transition
		name="custom-classes-transition"
		enter-active-class="animated bounceInLeft"
		leave-active-class="animated bounceOutRight"
	  >
		<p v-if="show">hello</p>
	  </transition>
    </div>
    </body>

<script type="text/javascript">

var app = new Vue({
    el: '#demo',
    data: {
        show: true
    }
});

</script>

</html>
